<template>
  <!-- <keep-alive v-if="$route.meta.keepAlive">
    <router-view></router-view>
  </keep-alive> -->
  <!-- <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view> -->
  <!-- vue3.0配置 -->
  <!-- 手机标题，用component形式载入，主要因为加载太快会显示成根路由 -->
  <component :is="GTitleMobile" :key="$route" />
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive"></component>
    </keep-alive>
    <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive">
    </component>
  </router-view>
  <div style="height:60px"></div>
  <component :is="GNavMobile" :key="$route" class="v-bottom">
  </component>
</template>

<script>
import GNavMobile from './components/NavMobile.vue';
import GTitleMobile from './components/TitleMobile.vue';
export default {
  name: 'App',
  data () {
    return {
      NavMobileV: true,
      currentScrollTop: 0,
      GTitleMobile,
      GNavMobile,
    }
  },
  components: {
    GNavMobile,
    GTitleMobile,
  },
  methods: {
  },
}
</script>

<style>
@media (max-width: 750px) {
  .el-dialog {
    width: 80% !important;
  }
  .el-message-box {
    width: 80% !important;
    margin-top: 30px !important;
  }
}
:root {
  --primary: aquamarine;
  --active: tomato;
  /* --primary: #a1df27; */
  --mainshow: 0px 0px 10px 0px aquamarine;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: rgb(96, 98, 102);
  /* margin-top: 60px; */
}
html,
body {
  font-size: 1em;
  /* 禁止复制 */
  user-select: none;
  /* 清除移动端长按div时出现蓝色背景 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 0;
  margin: 0;
}
/* 全局分行 */
.row-line {
  height: 10px;
}
/* 全局间隔 */
.col-width {
  width: 10px;
  display: inline-block;
}
.el-message,
.el-message-box {
  min-width: 300px !important;
}
/* el加载图标的大小 */
.el-loading-spinner {
  font-size: 20px !important;
}
.v-bottom {
  position: fixed;
  width: 100%;
  bottom: -3px;
  z-index: 100;
}

/* 滚动条 */
/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  background-color: #f5f5f5;
}
/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}

.lazy__img[lazy='loading'] {
  padding: 5em 0;
  width: 48px;
}

.lazy__img[lazy='loaded'] {
  width: 100%;
}

.lazy__img[lazy='error'] {
  padding: 5em 0;
  width: 48px;
}
</style>
